<template>
  <el-container>
    <el-header>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/home">
            <el-dropdown-item>首页</el-dropdown-item>
          </router-link>
          <!-- divided  横线-->
          <!-- <el-dropdown-item divided @click.native="logout"></el-dropdown-item> -->
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-main>
      <!-- {{ showDatas.title }} -->
      <div class="titile">{{ showDatas.title }}</div>
      <div class="date_box clearfloat">
        <div>发布日期：<span>{{ showDatas.publish_date }}</span></div>
        <div>点击数：<span>{{ visitNum }}</span></div>
        <div>作者：<span>{{ showDatas.author }}</span></div>
      </div>
      <div style="text-align: right;">综合评分：<span style="display:inline-block">
        <!-- 只读的评分用来展示分数 -->
        <el-rate
          v-if=" value != 0 "
          v-model="value"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
          style="display:inline-block;margin-left: 0px;"
        />
        <p v-else style="color:#ff9900;font-size: 14px;">暂无</p>
      </span></div>
      <el-divider />
      <div class="content">
        <pre v-html="showDatas.content" />
      </div>
      <!-- 评价 -->
      <el-row v-if="is_comment==true" class="evaluate">
        <el-divider />
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-edit" @click="openEvaluate(articleId)">评价</el-button>
        </el-col>
      </el-row>
      <el-dialog title="评价" :visible.sync="EvaluateDialogVisible" width="35%">
        <el-form label-width="100px">
          <el-form-item label="打分：" class="Evaluat-item">
            <el-rate
              v-model="form.importance"
              :texts="customTexts"
              show-text
            />
          </el-form-item>
          <el-form-item label="其他评价：">
            <!-- v-model="addList.content" -->
            <el-input v-model="form.content" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="EvaluateDialogVisible = false; form.importance=0;form.content=''">取 消</el-button>
          <el-button type="primary" @click="addEvaluateConfirm(articleId)">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
    <el-footer>
      <div>
        Copyright©1997-{{ dataYear }} xxxxx有限公司 版权所有
        <a target="_blank" href="http://www.beian.gov.cn">粤ICP备xxxxx号</a>
      </div>
    </el-footer>
  </el-container>
</template>
<script >
// import {Navbar} from './components'
import { fetchArticle, addScanCount, addEvaluate } from '@/api/newUsertest'
import { mapGetters } from 'vuex'
export default {
  // components: {
  //   Navbar,
  // },
  data() {
    return {
      showDatas: {},
      dataYear: new Date().getFullYear(),
      visitNum: '0',
      articleId: '', // 文章id
      value: 0,
      EvaluateDialogVisible: false,
      customTexts: ['非常差', '差', '一般', '好', '推荐'],
      SubmitTime: 0,
      current_time: 0,
      articleoldId: '',
      isEvaluate: false,
      is_comment: false, // 是否评价
      form: {
        importance: 0,
        content: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created() {
    this.articleId = this.$route.query.Id // this.$route.params && this.$route.params.id
    this.getArticleData(this.articleId)
    setTimeout(() => {
      this.addScanCount(this.articleId)
    }, 100)
  },
  mounted() {

  },
  methods: {

    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    // 文章数据
    getArticleData(id) {
      fetchArticle(id).then(response => {
        var averageScore = 0
        if (!response.data) {
          return this.$message({
            message: '文章不存在',
            type: 'error'
          })
        } else {
          this.showDatas = response.data
          // 新增阅读数

          for (let i = 0; i < this.showDatas.EvaluateS.length; i++) {
            averageScore += this.showDatas.EvaluateS[i].importance
          }
          this.value = Math.floor(averageScore / this.showDatas.EvaluateS.length * 10) / 10
          this.SubmitTime = this.showDatas.EvaluateS.length > 0 ? this.showDatas.EvaluateS[this.showDatas.EvaluateS.length - 1].timestamp : 0
          if (this.showDatas.is_comment == '2') {
            this.is_comment = false
          } else {
            this.is_comment = true
          }
        }
        // console.log(this.showDatas)
      }).catch(err => {
        console.log(err)
      })
    },
    // 增加阅读数
    addScanCount(id) {
      this.visitNum = this.showDatas.visitNum + 1
      console.log(this.visitNum)
      addScanCount({
        'id': id,
        'visitNum': this.visitNum
      }).then(response => {
        // console.log(response.msg)
      })
    },
    // 评价
    openEvaluate(id) {
      this.articleoldId = localStorage.getItem('articleId')
      var current_time = Date.now()
      this.getArticleData(id)
      // if(this.articleoldId!=id){
      setTimeout(() => {
        if (current_time - this.SubmitTime > 300000) {
          this.EvaluateDialogVisible = true
        } else {
          this.$message({
            message: '你已经评价过此文章，五分钟后可再次进行评价',
            type: 'warning'
          })
        }
      }, 300)
    },
    addEvaluateConfirm(id) {
      this.isEvaluate = true
      this.form.timestamp = Date.now()
      console.log(this.isEvaluate)
      addEvaluate({ id: id, form: this.form }).then(res => {
        this.$message({
          message: '评价成功，感谢你的评价。',
          type: 'success'
        })
        console.log(res)
        localStorage.setItem('articleId', id)
        this.EvaluateDialogVisible = false
        // 提交后清空输入框
        this.form.importance = 0
        this.form.content = ''
      })
    }
  }
}
</script>
<style lang="scss">
* {
  font-family: "微软雅黑";
  margin: 0;
}

.clearfloat::before,
.clearfloat::after {
  overflow: hidden;
  content: "";
  clear: both;
  display: block;
}

.el-container {
  width: 100%;
  box-sizing: border-box;

  .el-main {
    width: 80%;
    display: block;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;

    .titile {
      font-size: 20px;
      color: #001C53;
    }

    .date_box {
      display: inline-block;
      font-size: 14px;
      margin-top: 10px;
      font-weight: 400;
      color: #999999;

      div {
        float: left;
        margin-left: 20px;
      }
    }

    .content {
      text-align: justify;
      text-indent: 2em;
      letter-spacing: 1px;
      min-height: 450px;
      pre,p {
        white-space: normal;
        color: #333333;
        // margin: 0;
        line-height: 30px;
        font-size: 16px;
      }
    }
    .evaluate{
      text-align: right;
    }
    .Evaluat-item{
      display: flex;align-items: center;
      .el-form-item__content{
        margin-left: 0 !important;
      }
    }
    .el-input__inner{
        height: 75px;
    }
    .el-dialog{
      margin: 30px auto;
      .dialog-footer{
        text-align: center;
      }
    }

  }

  .el-header {
    width: 100%;
    background-color: #304156;

    .avatar-wrapper .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    .el-dropdown {
      float: right;
      top: 10px;
      right: 20px;

      .el-icon-caret-bottom {
        color: #fff;
      }
    }
  }

  .el-footer {
    display: flex;
    width: 100%;
    text-align: center;
    background-color: #304156;
    color: #fff;
    align-items: center;
    margin-top: 30px;
    div {
      margin: 0 auto;
    }
  }
}</style>
